<template>
    <div class="wrapper">
        <!-- Breadcrumb Area Start Here -->
        <div class="breadcrumb-area">
            <div class="container">
                <ol class="breadcrumb breadcrumb-list">
                    <li class="breadcrumb-item">
                        <NuxtLink to="/">Home</NuxtLink>
                    </li>
                    <li class="breadcrumb-item active">account</li>
                </ol>
            </div>
        </div>
        <!-- Breadcrumb Area End Here -->
        <!-- My Account Page Start Here -->
        <div class="my-account white-bg ptb-80">
            <div class="container">
                <div class="account-dashboard">
                   <div class="dashboard-upper-info">
                       <div class="row align-items-center no-gutters">
                           <div class="col-xl-3 col-lg-3 col-md-6">
                               <div class="d-single-info">
                                   <p class="user-name">Hello <span>yourmail@info</span></p>
                                   <p>(not yourmail@info? <a class="log-out" href="#">Log Out</a>)</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-4 col-md-6">
                               <div class="d-single-info">
                                   <p>Need Support? Customer service.</p>
                                   <p>admin@example.com.</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-3 col-md-6">
                               <div class="d-single-info">
                                   <p>E-mail them at </p>
                                   <p>support@example.com</p>
                               </div>
                           </div>
                           <div class="col-xl-3 col-lg-2 col-md-6">
                               <div class="d-single-info text-lg-center">
                                   <a class="view-cart" href="cart.html">view cart</a>
                               </div>
                           </div>
                       </div>
                   </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <!-- Nav tabs -->
                            <ul class="nav flex-column dashboard-list" role="tablist">
                                <li><a class="nav-link active" data-toggle="tab" href="#dashboard">Dashboard</a></li>
                                <!-- <li> <a class="nav-link" data-toggle="tab" href="#orders">Orders</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#downloads">Downloads</a></li>
                                <li><a class="nav-link" data-toggle="tab" href="#address">Addresses</a></li> -->
                                <li><a class="nav-link" data-toggle="tab" href="#account-details">Account details</a></li>
                                <li><a class="nav-link" href="javascript:;" @click="logout">logout</a></li>
                            </ul>
                        </div>
                        <div class="col-lg-10">
                            <!-- Tab panes -->
                            <div class="tab-content dashboard-content mt-all-40">
                                <div id="dashboard" class="tab-pane fade show active">
                                    <h3>Dashboard </h3>
                                    <p>From your account dashboard. you can easily check & view your <a href="#">recent orders</a>, manage your <a href="#">shipping and billing addresses</a> and <a href="#">edit your password and account details.</a></p>
                                </div>
                                <!-- <div id="orders" class="tab-pane fade">
                                    <h3>Orders</h3>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Order</th>
                                                    <th>Date</th>
                                                    <th>Status</th>
                                                    <th>Total</th>
                                                    <th>Actions</th>	 	 	 	
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>1</td>
                                                    <td>sep 10, 2018</td>
                                                    <td>Processing</td>
                                                    <td>$25.00 for 1 item </td>
                                                    <td><a class="view" href="cart.html">view</a></td>
                                                </tr>
                                                <tr>
                                                    <td>2</td>
                                                    <td>sep 10, 2018</td>
                                                    <td>Processing</td>
                                                    <td>$17.00 for 1 item </td>
                                                    <td><a class="view" href="cart.html">view</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div id="downloads" class="tab-pane fade">
                                    <h3>Downloads</h3>
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <th>Product</th>
                                                    <th>Downloads</th>
                                                    <th>Expires</th>
                                                    <th>Download</th>	 	 	 	
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>elomus- ecommerce bootstrap template</td>
                                                    <td>Aug 10, 2018</td>
                                                    <td>never</td>
                                                    <td><a class="view" href="#">Download File</a></td>
                                                </tr>
                                                <tr>
                                                    <td>gatcomart - ecommerce html template</td>
                                                    <td>Sep 11, 2018</td>
                                                    <td>never</td>
                                                    <td><a class="view" href="#">Download File</a></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <div id="address" class="tab-pane">
                                   <p>The following addresses will be used on the checkout page by default.</p>
                                    <h4 class="billing-address">Billing address</h4>
                                    <a class="view" href="#">edit</a>
                                    <p>Bayazid Hasan</p>
                                    <p>Bangladesh</p>   
                                </div> -->
                                <div id="account-details" class="tab-pane fade">
                                    <h3>Account details </h3>
                                    <div class="register-form login-form clearfix">
                                        <form action="#">
                                            <div class="form-group row align-items-center">
                                                <label class="col-lg-3 col-md-4 col-form-label">Social title</label>
                                                <div class="col-lg-6 col-md-8">
                                                    <span class="custom-radio"><input name="id_gender" value="1" type="radio"> Mr.</span>
                                                    <span class="custom-radio"><input name="id_gender" value="1" type="radio"> Mrs.</span>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="f-name" class="col-lg-3 col-md-4 col-form-label">Name</label>
                                                <div class="col-lg-6 col-md-8">
                                                    {{ userData.name }}
                                                    <!-- <input type="text" class="form-control" id="f-name"> -->
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="email" class="col-lg-3 col-md-4 col-form-label">Email address</label>
                                                <div class="col-lg-6 col-md-8">
                                                    {{ userData.email }}
                                                    <!-- <input type="text" :value="userData.email" class="form-control" id="email"> -->
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="email" class="col-lg-3 col-md-4 col-form-label">Phone</label>
                                                <div class="col-lg-6 col-md-8">
                                                    {{ userData.phoneNum }}
                                                    <!-- <input type="text" :value="userData.phoneNum" class="form-control" id="email"> -->
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="email" class="col-lg-3 col-md-4 col-form-label">Address</label>
                                                <div class="col-lg-6 col-md-8">
                                                    {{ userData.address }}
                                                    <!-- <input type="text" :value="userData.address" class="form-control" id="email"> -->
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- My Account Page End Here -->
    </div>
</template>

<script lang="ts" setup>
    import ILink from 'models/ILink'

    onMounted(() => { 
        console.log(8888)
        getUserInfo()
    })

    const userData = ref({
        name: '',
        email: '',
        phoneNum: '',
        address: '',
    })
    // 是否已经登录
    const getUserInfo = async () => {
        console.log(getStorage('userInfo'));
        userData.value = getStorage('userInfo')
    }

    useHead({
        title: 'user-info',
        meta: [
            { name: 'keywords', content: userData.name },
            { name: 'description', content: userData.name },
        ]
    })

    const logout  = async () => {
        removeStorage('userInfo');
        window.location.href = '/login'
    }
    
</script>

<style scoped></style>
